<template>
    <div class="container">
        <div class="container-case">
            <div class="explicit">签单数据统计</div>
            <div class="reseau">
                <div class="communal-portion">
                    <div class="quantum">今日新增签单（份）</div>
                    <div class="digit">{{data?.todaySign}}</div>
                    <div class="relatively">
                        比昨天 <span :class="['percentage',data?.todayMoreThanYesterdaySign.slice(0,data?.todayMoreThanYesterdaySign.length-1) >= 0? 'variety' : '' ]">{{data?.todayMoreThanYesterdaySign}}</span>
                    </div>
                </div>
                <div class="communal-portion">
                    <div class="quantum">昨日新增签单（份）</div>
                  <div class="digit">{{data?.yesterdaySign}}</div>
                    <div class="relatively">
                        比前一天 <span :class="['percentage',data?.yesterdayMoreBeforeYesterdaySign >= 0? 'variety' : '' ]">{{data?.yesterdayMoreBeforeYesterdaySign}}</span>
                    </div>
                </div>
                <div class="communal-portion">
                    <div class="quantum">本周新增签单（份）</div>
                  <div class="digit">{{data?.thisWeekSign}}</div>
                    <div class="relatively">
                        比上周 <span :class="['percentage',data?.thisWeekMoreThanLastWeekSign.slice(0,data?.thisWeekMoreThanLastWeekSign.length-1) >= 0? 'variety' : '' ]">{{data?.thisWeekMoreThanLastWeekSign}}</span>
                    </div>
                </div>
                <div class="communal-portion">
                    <div class="quantum">本月新增签单（份）</div>
                  <div class="digit">{{data?.thisMonthSign}}</div>
                    <div class="relatively">
                        比上月 <span :class="['percentage',data?.thisMonthMoreThanLastMonthSign >= 0? 'variety' : '' ]">{{data?.thisMonthMoreThanLastMonthSign}}</span>
                    </div>
                </div>
                <div class="communal-portion">
                    <div class="quantum">签单总数（份）</div>
                  <div class="digit">{{data?.signCount}}</div>
                    <div class="relatively">
                        比上月 <span :class="['percentage',data?.thisMonthMoreThenLastSign >= 0? 'variety' : '' ]">{{data?.thisMonthMoreThenLastSign}}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="container-case">
            <div class="explicit">客户数据统计</div>
            <div class="reseau">
                <div class="communal-portion">
                    <div class="quantum">今日新增客户（个）</div>
                    <div class="digit">{{data?.todayCustomer}}</div>
                    <div class="relatively">
                        比昨天 <span :class="['percentage',data.todayMoreThanYesterdayCustomer.slice(0,data?.todayMoreThanYesterdayCustomer.length-1) >= 0? 'variety' : '' ]">{{data.todayMoreThanYesterdayCustomer}}</span>
                    </div>
                </div>
                <div class="communal-portion">
                    <div class="quantum">昨日新增客户（个）</div>
                    <div class="digit">{{data?.yesterdayCustomer}}</div>
                    <div class="relatively">
                        比前一天 <span :class="['percentage',data.yesterdayMoreBeforeYesterdayCustomer >= 0? 'variety' : '' ]">{{data.yesterdayMoreBeforeYesterdayCustomer}}</span>
                    </div>
                </div>
                <div class="communal-portion">
                    <div class="quantum">本周新增客户（个）</div>
                    <div class="digit">{{data?.thisWeekCustomer}}</div>
                    <div class="relatively">
                        比上周 <span :class="['percentage',data.thisWeekMoreThanLastWeekCustomer.slice(0,data?.thisWeekMoreThanLastWeekCustomer.length-1) >= 0? 'variety' : '' ]">{{data.thisWeekMoreThanLastWeekCustomer}}</span>
                    </div>
                </div>
                <div class="communal-portion">
                    <div class="quantum">本月新增客户（个）</div>
                    <div class="digit">{{data?.thisWeekCustomer}}</div>
                    <div class="relatively">
                        比上月 <span :class="['percentage',data.thisMonthMoreThanLastMonthCustomer >= 0? 'variety' : '' ]">{{data.thisMonthMoreThanLastMonthCustomer}}</span>
                    </div>
                </div>
                <div class="communal-portion">
                    <div class="quantum">客户总数（个）</div>
                    <div class="digit">{{data?.customerCount}}</div>
                    <div class="relatively">
                        比上月 <span :class="['percentage',data.thisMonthMoreThenLastCus >= 0? 'variety' : '' ]">{{data.thisMonthMoreThenLastCus}}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getOtherData } from '@/api/quick'
import user from '@/utils/user'
import { number } from '@intlify/core-base'

onLoad(async () => {
  await user.waitLogin()
  otherData()
})

// 其他数据统计接口
const data = ref([])
const otherData = async () => {
  const result = await getOtherData()
  console.log(result, '其他数据统计')
  data.value = result
  // console.log(data.values.sign.todaySign, '其他数据统计赋值')
}
</script>
<style lang="scss" scoped>
.container {
    background: $white;
    height: 100%;
}
.container-case {
    width: 690rpx;
    height: 757rpx;
    background: #ffffff;
    border-radius: 16rpx;
    margin: 30rpx;
    padding: 30rpx 0 30rpx 30rpx;
    box-sizing: border-box;
}
.explicit {
    font-size: $font-normal;
    font-weight: 400;
    color: $black;
}
.reseau {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.communal-portion {
    background: #f4f4f7;
    border-radius: 16rpx;
    padding: 30rpx;
    margin: 30rpx 30rpx 0 0;
    .quantum {
        font-size: $font-small;
        font-weight: 400;
        color: #565868;
    }
    .digit {
        padding: 16rpx 0;
        font-size: $font-large;
        font-weight: 800;
        color: $black;
    }
    .relatively {
        font-size: $font-base;
        font-weight: 400;
        color: $grey;
        .percentage {
            font-size: $font-base;
            font-weight: 400;
            color: $green;
        }
      .variety {
        color: #ff7642;
      }
    }
}

</style>
